<template>
    <div class="recommended">
        <div class="recommended-top" >
        <svg class="icon" @click="$router.go(-1)">
            <use xlink:href="#icon-zuo1"></use>
        </svg>
            <h1>推荐新音乐</h1>
        </div>
        <div class="list" v-for="(item,i) in musicList" :key="i" @click="setplay(item)">
            <div><img :src="item.picUrl" ></div>
            <div class="title">歌名:{{item.name}}</div>
            <div class="singer">歌手:<span v-for="(date,k) in item.song.album.artists" :key="k">{{date.name}}</span></div>
        </div>
    </div>
</template>
<script>
import { setPersonalizedt } from '@/api/index.js'
export default {
  data () {
    return {
      musicList: []
    }
  },
  async mounted () {
    const musicList = await setPersonalizedt()
    this.musicList = musicList.data.result
    console.log(musicList)
  },
  methods: {
    setplay (item) {
      console.log(item)
      item.al = item
      item.dt = item.song.duration
      console.log(item.dt)
      this.$store.commit('pushPlaylist', item)
      this.$store.commit('setPlayIndex', this.$store.state.playlist.length - 1)
    }
  }
}
</script>
<style lang="less" scoped>
.recommended{
    width: 7.5rem;
    position: absolute;
    top: 0.9rem;
    bottom: 1.2rem;
    left: 0;
    overflow:scroll;
    .recommended-top{
        position:fixed;
        top: 0;
        left: 0;
        color:darkorchid;
        font-style: italic;
        width: 7.1rem;
        margin: 0 auto;
        text-align: center;
        display: flex;
        align-items: center;
        .icon{
            width: 0.6rem;
            height: 0.6rem;
            margin-right: 1.5rem;
            margin-left: 0.2rem;
        }
    }
    .list{
        height: 2.5rem;
        width: 7.1rem;
        margin: 0 auto;
        margin-top: 0.3rem;
        img{
            width: 2.5rem;
            height: 2.5rem;
            float: left;
            margin-right: 0.5rem;
        }
        .title{
            font-weight: 900;
            font-size: 0.33rem;
            margin-bottom: 0.2rem;
        }
        .singer{
            span{
              color:#333;
              margin: 0.1rem;
            }
        }
    }
}
</style>
